import React, { useEffect, useState } from 'react';
import './recall.less';
import Image from '../../static/images/BBD房子.png';
import { Input, Space, Table, Tag, Button, Modal, Pagination } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import axios from '../../utils/request';

export default function index() {
  const [top, setTop] = useState('none');
  const [bottom, setBottom] = useState('bottomCenter');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isModalOpen1, setIsModalOpen1] = useState(false);
  const [state, setstate] = useState([]);
  const [zong, setzong] = useState(0);
  const [sta, setSta] = useState([]);
  const [pageSize, setpageSize] = useState(5);
  const [search, getSearch] = useState('');
  const [page, setpage] = useState(1);
  const onChange = (e) => {
    console.log(e);
    getSearch(e.target.value);
  };
  const showModal = (item) => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const showModal1 = (item) => {
    console.log(item);

    // setstate([item]);
    setIsModalOpen1(true);
  };

  const handleOk1 = () => {
    setIsModalOpen1(false);
  };

  const handleCancel1 = () => {
    setIsModalOpen1(false);
  };
  useEffect(() => {
    getSta(page, pageSize, search);
  }, []);
  const getSta = async (p: number, ps: number, k: string) => {
    getSearch(k);
    setpage(p);
    setpageSize(ps);
    let res;
    if (k) {
      res = await axios.get(
        `/cxy/getExchange?kw=${search}&page=${p}&pageSize=${ps}`,
      );
    } else {
      res = await axios.get(`/cxy/getExchange?page=${p}&pageSize=${ps}`);
    }
    setSta(res.data);
    setzong(res.all.length);
    console.log(res);
  };
  const fy = (a: any, n: any) => {
    console.log(a, n);
    getSta(a, n, search);
  };
  interface DataType {
    key: string;
    name: string;
    startTime: string;
    yuTime: string;
    lei: string;
    tags: string[];
  }
  const Clear = () => {
    getSta(page, pageSize, '');
    getSearch('');
  };
  const hss = () => {
    getSta(page, pageSize, search);
  };
  const colu = [
    {
      title: '商品编号',
      dataIndex: 'shang',
      key: 'shang',
    },
    {
      title: '商品名称',
      dataIndex: 'shangname',
      key: 'shangname',
    },
    {
      title: '规格',
      dataIndex: 'se',
      key: 'se',
    },
    {
      title: '数量',
      dataIndex: 'number',
      key: 'number',
    },
    {
      title: '库存',
      dataIndex: 'ku',
      key: 'ku',
    },
  ];
  const columns: ColumnsType<DataType> = [
    {
      title: '订单编号',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '订单类型',
      dataIndex: 'lei',
      key: 'lei',
    },
    {
      title: '创建时间',
      dataIndex: 'startTime',
      key: 'startTime',
    },
    {
      title: '预约时间',
      dataIndex: 'yuTime',
      key: 'yuTime',
    },

    {
      title: '订单状态',
      key: 'tags',
      dataIndex: 'tags',
      render: (tags: string[]) => (
        <span>
          {tags.map((tag) => {
            let color = tag.length > 5 ? 'geekblue' : 'green';
            if (tag === 'loser') {
              color = 'volcano';
            }
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </span>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a>
            {record.lei == '用户自取' ? (
              <text onClick={showModal}>取货</text>
            ) : (
              <text
                onClick={() => {
                  showModal1(record);
                }}
              >
                安排送货
              </text>
            )}
          </a>
        </Space>
      ),
    },
  ];
  const colus = [
    {
      key: '1',
      shang: 'HBV123456',
      shangname: '创意卫浴五件套 欧式高档卫生间洗漱杯套装浴室用品.',
      se: '蓝色款',
      number: 1,
      ku: 12,
    },
    {
      key: '2',
      shang: 'HBV123456',
      shangname: '创意卫浴五件套 欧式高档卫生间洗漱杯套装浴室用品.',
      se: '蓝色款',
      number: 1,
      ku: 12,
    },
    {
      key: '3',
      shang: 'HBV123456',
      shangname: '创意卫浴五件套 欧式高档卫生间洗漱杯套装浴室用品.',
      se: '蓝色款',
      number: 1,
      ku: 12,
    },
  ];
  const data: DataType[] = [
    {
      key: '1',
      name: 'HBV123456',
      startTime: '2019-11-12',
      yuTime: '2013-12-11',
      lei: '送货上门',
      tags: ['待收货'],
    },
    {
      key: '2',
      name: 'HBV123456',
      startTime: '2019-11-12',
      yuTime: '2013-12-11',
      lei: '用户自取',
      tags: ['待收货'],
    },
    {
      key: '3',
      name: 'HBV123456',
      startTime: '2019-11-12',
      yuTime: '2013-12-11',
      lei: '送货上门',
      tags: ['待收货'],
    },
  ];

  return (
    <div className="quan2">
      <div className="quan3">
        <div className="header2"></div>
        <div className="bottom2"></div>
        <div className="ding3">
          <div className="headerding2">
            <ul>
              <li
                style={{ fontSize: '2vh', fontWeight: '800', color: 'white' }}
              >
                兑换订单管理
              </li>
              <li style={{ color: 'white' }}>
                <img
                  src={Image}
                  alt=""
                  style={{ width: '3vh', height: '3vh' }}
                />
              </li>
              <li style={{ color: 'white' }}>-</li>
              <li style={{ fontSize: '1.8vh', color: 'white' }}>订单管理</li>
              <li style={{ color: 'white' }}>-</li>
              <li style={{ fontSize: '1.8vh', color: 'white' }}>
                兑换订单管理
              </li>
            </ul>
          </div>
          <div className="ding2">
            <div className="title1">
              <div className="Content1">
                <ul>
                  <li style={{ paddingRight: '10vh', fontSize: '2vh' }}>
                    兑换订单管理
                  </li>
                  <li style={{ paddingRight: '2vh' }}>
                    <span>订单编号：</span>
                  </li>
                  <li>
                    <Input
                      placeholder="请输入订单编号"
                      style={{ marginTop: '-0.5vh' }}
                      allowClear
                      value={search}
                      onChange={onChange}
                      onPressEnter={hss}
                    />
                  </li>
                  <li>
                    <Button
                      type="primary"
                      style={{ marginTop: '-0.5vh', marginLeft: '1vh' }}
                      onClick={Clear}
                    >
                      清除
                    </Button>
                  </li>
                </ul>
              </div>
            </div>
            <div className="content1">
              <Table
                columns={columns}
                // pagination={{ position: [top, bottom] }}
                pagination={false}
                dataSource={sta}
                scroll={{ x: 1000 }}
              />
              <Pagination
                total={zong}
                responsive
                style={{ marginLeft: '38%', marginTop: '5%' }}
                current={page}
                onChange={fy}
                defaultPageSize={pageSize}
              />
            </div>
            <Modal
              title="取货"
              open={isModalOpen}
              onOk={handleOk}
              width={800}
              onCancel={handleCancel}
            >
              <div className="model2">
                <div className="ban1">
                  <ul>
                    <li style={{ fontWeight: '800', fontSize: '15px' }}>
                      取货列表
                    </li>
                    <li>
                      <Table
                        columns={colu}
                        pagination={{ position: [top, bottom] }}
                        dataSource={colus}
                        scroll={{ x: 1000 }}
                      />
                    </li>
                  </ul>
                </div>
              </div>
              <div className="model3">
                <div className="ban2">
                  <ul>
                    <li
                      style={{
                        fontWeight: '800',
                        fontSize: '15px',
                        listStyle: 'none',
                      }}
                    >
                      取货
                    </li>
                  </ul>
                </div>
                <div className="vbn2">
                  <div className="nac2">
                    <ul style={{ listStyle: 'none' }}>
                      <li style={{ fontWeight: '800', fontSize: '15px' }}>
                        取货码取货：
                      </li>
                      <li style={{ marginRight: '2vh' }}>
                        <Input placeholder="请输入取货码" allowClear />
                      </li>
                      <li>
                        <Button
                          style={{
                            backgroundColor: 'rgb(94, 114, 228)',
                            color: 'white',
                          }}
                        >
                          取货
                        </Button>
                      </li>
                    </ul>
                  </div>
                  <div className="nac3">
                    <ul style={{ listStyle: 'none' }}>
                      <li
                        style={{
                          fontWeight: '800',
                          fontSize: '15px',
                          marginRight: '1.8vh',
                        }}
                      >
                        扫码取货：
                      </li>
                      <li>
                        <Button
                          style={{
                            backgroundColor: 'rgb(94, 114, 228)',
                            color: 'white',
                          }}
                        >
                          扫码取货
                        </Button>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </Modal>
            <Modal
              title="安排送货"
              open={isModalOpen1}
              onOk={handleOk1}
              onCancel={handleCancel1}
              width={800}
            >
              <div className="model4">
                <div className="ban1">
                  <ul style={{ listStyle: 'none' }}>
                    <li style={{ fontWeight: '800', fontSize: '15px' }}>
                      送货列表
                    </li>
                    <li>
                      <Table
                        columns={colu}
                        pagination={{ position: [top, bottom] }}
                        dataSource={colus}
                        scroll={{ x: 1000 }}
                      />
                    </li>
                  </ul>
                </div>
              </div>
              <div className="model5">
                <div className="ban2">
                  <ul>
                    <li
                      style={{
                        fontWeight: '800',
                        fontSize: '15px',
                        listStyle: 'none',
                      }}
                    >
                      收货员信息
                    </li>
                  </ul>
                </div>
                <div className="vbn2">
                  <div className="nac2"></div>
                  <div className="nac2"></div>
                </div>
              </div>
            </Modal>
          </div>
        </div>
      </div>
    </div>
  );
}
